<template>
  <view class="container">
    <view class="info_box" v-for="(i, index) in list" :key="index">
      <view class="info_title"> <text>{{i.workOrderNo}}</text>
        <text class="flag_box" v-if="i.workOrderType == 0">自派单</text>
        <text class="flag_box" v-if="i.workOrderType == 1" style="border-color: #3c9cff;color: #3c9cff;">手工单</text>
          </view>
      <view>
        <view class="info_content">
          <text> 发单时间 </text>
          <text> {{ i.launchTime || "-" }} </text>
        </view>
        <view class="info_content" style="padding-bottom: 20rpx">
          <text> 有机质类型 </text>
          <text> {{ i.vehicleOrganicType || "-" }} </text>
        </view>
        <view class="info_content" style="padding-bottom: 20rpx">
          <text> 车牌号码 </text>
          <text> {{ i.licenseNumber || "-" }} </text>
        </view>
        <view class="info_content" v-for="(item, idx) in i.workOrderDetailVOList" :key="idx" style="padding-bottom: 20rpx">
          <text> 收运点 </text>
          <text> {{ item.farmName || "-" }} </text>
        </view>
        <u-button
          text="接单"
          color="#000000"
          style="margin-top: 40rpx"
          @click="taskDetail(i)"
        ></u-button>
      </view>
    </view>
  </view>
    
</template>
<script>
import { taskList } from '../api/api';
export default {
  data () {
    return {
      navIndex: 0,
      list: [],
    }
  },
  methods: {
    taskDetail(item) {
      uni.setStorageSync('driverTaskDetail', item)
      uni.navigateTo({ url: '/pagesDriver/system/questDetail' })
    }
  },
  onShow() {
    uni.hideHomeButton();
    // 接口调整为获取待接单任务传参
    taskList({ workOrderDetailState: '' }).then(res => {
      console.log(res.data, '列表');
      if (res.data.code == 200) {
        this.list = res.data.data;
      }
    })
  },
}
</script>
<style lang="scss" scoped>
.container{
  min-height: 100vh;
  box-sizing: border-box;
  width: 100vw;
  padding: 20rpx;
  background: #f2f8f5;
  overflow-y: scroll;
}
.info_box {
  width: 100%;
  box-sizing: border-box;
  border-radius: 30rpx;
  background-color: #fff;
  padding: 40rpx;

  .info_title {
    width: 100%;
    padding-bottom: 20rpx;
    border-bottom: 2rpx solid #f2f2f2;
    font-size: 36rpx;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .flag_box {
        width: 100rpx;
        font-size: 28rpx;
        font-weight: normal;
        height: 50rpx;
        border-radius: 8rpx;border: 2rpx solid #5ac725;color: #5ac725;display: flex;align-items: center;justify-content: center;
    }
  }
  .info_content {
    margin-top: 20rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 28rpx;
  }
}

</style>